<template>
  <div class="custom-table">
    <a-table
      :columns="columns"
      :dataSource="data"
      bordered
      rowKey="id"
      pagination="false"
    >
      <template #footer>
        <div style="text-align: center; font-weight: bold; color: red;">
          今日销售发货托数合计：<span>{{ totalShipments }}</span>
        </div>
      </template>
    </a-table>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  data() {
    return {
      columns: [
        { title: "开单时间", dataIndex: "billingTime", key: "billingTime" },
        { title: "客户名称", dataIndex: "customerName", key: "customerName" },
        { title: "单号", dataIndex: "orderNumber", key: "orderNumber" },
        { title: "料号", dataIndex: "materialCode", key: "materialCode" },
        { title: "名称", dataIndex: "name", key: "name" },
        { title: "数量", dataIndex: "quantity", key: "quantity" },
        { title: "应发（托）", dataIndex: "shouldShip", key: "shouldShip" },
        { title: "实发（托）", dataIndex: "actualShip", key: "actualShip" },
        { title: "发货情况", dataIndex: "status", key: "status" },
        { title: "差异", dataIndex: "difference", key: "difference" },
        { title: "备注（原因）", dataIndex: "remarks", key: "remarks" },
        { title: "发货时间", dataIndex: "shipmentTime", key: "shipmentTime" },
        { title: "司机", dataIndex: "driver", key: "driver" },
        { title: "车辆", dataIndex: "vehicle", key: "vehicle" },
      ],
      data: [
        {
          id: 1,
          billingTime: "2025/1/2 15:19",
          customerName: "深圳理光",
          orderNumber: "80525898",
          materialCode: "220005000581",
          name: "Cell电池模组7.0",
          quantity: 600,
          shouldShip: 38,
          actualShip: 38,
          status: "已发",
          difference: 0,
          remarks: "",
          shipmentTime: "2025/1/4 19:00",
          driver: "胡超",
          vehicle: "渝DY1202",
        },
        {
          id: 2,
          billingTime: "2025/1/2 15:19",
          customerName: "深圳理光",
          orderNumber: "80525900",
          materialCode: "220005000591",
          name: "LG070A502-1 Cell电池模组7.0",
          quantity: 6327,
          shouldShip: 38,
          actualShip: 38,
          status: "已发",
          difference: 0,
          remarks: "",
          shipmentTime: "",
          driver: "",
          vehicle: "",
        },
        {
          id: 3,
          billingTime: "2025/1/2 15:19",
          customerName: "深圳理光",
          orderNumber: "80525998",
          materialCode: "220005000461",
          name: "pure cell电池模组7.0",
          quantity: 7535,
          quantity: 6327,
          shouldShip: 38,
          actualShip: 38,
          status: "已发",
          difference: 0,
          remarks: "",
          shipmentTime: "",
          driver: "",
          vehicle: "",
        },
        {
          id: 4,
          billingTime: "2025/1/2 15:19",
          customerName: "深圳理光",
          orderNumber: "80526016",
          materialCode: "220005000611",
          name: "pure cell(整机用) 9.35",
          quantity: 30384,
          shouldShip: 38,
          actualShip: 38,
          status: "已发",
          difference: 0,
          remarks: "",
          shipmentTime: "",
          driver: "",
          vehicle: "",
        },
        {
          id: 5,
          billingTime: "2025/1/2 15:19",
          customerName: "深圳理光",
          orderNumber: "80526190",
          materialCode: "220005000491",
          name: "Cell模组4.1",
          quantity: 600,
          shouldShip: 1,
          actualShip: 1,
          status: "已发",
          difference: 0,
          remarks: "",
          shipmentTime: "2025/1/4 10:25",
          driver: "何炳逵",
          vehicle: "川B4P860",
        },
        {
          id: 6,
          billingTime: "2025/1/3 15:19",
          customerName: "重庆",
          orderNumber: "80526196",
          materialCode: "220010003920",
          name: "LCM 15.6 B M81 COnL19",
          quantity: 65,
          shouldShip: 1,
          actualShip: 1,
          status: "已发",
          difference: 0,
          remarks: "",
          shipmentTime: "2025/1/4 16:20",
          driver: "庞国鑫",
          vehicle: "川ADU999",
        },
        {
          id: 7,
          billingTime: "2025/1/5 18:33",
          customerName: "井冈山创派",
          orderNumber: "80526632",
          materialCode: "220014004710",
          name: "Q-panel B Cell片",
          quantity: 3238,
          shouldShip: 22,
          actualShip: 22,
          status: "已发",
          difference: 0,
          remarks: "",
          shipmentTime: "2024/1/4 20:50",
          driver: "万洪",
          vehicle: "渝DZ1891",
        },
        {
          id: 8,
          billingTime: "2025/1/5 18:33",
          customerName: "井冈山创派",
          orderNumber: "80526632",
          materialCode: "220014004710",
          name: "Q-panel B Cell片",
          quantity: 3238,
          shouldShip: 22,
          actualShip: 22,
          status: "已发",
          difference: 0,
          remarks: "",
          shipmentTime: "2024/1/4 20:50",
          driver: "万洪",
          vehicle: "渝DZ1891",
        },
        {
          id: 9,
          billingTime: "2025/1/5 18:33",
          customerName: "井冈山创派",
          orderNumber: "80526632",
          materialCode: "220014004710",
          name: "Q-panel B Cell片",
          quantity: 3238,
          shouldShip: 22,
          actualShip: 22,
          status: "已发",
          difference: 0,
          remarks: "",
          shipmentTime: "2024/1/4 20:50",
          driver: "万洪",
          vehicle: "渝DZ1891",
        },
        {
          id: 10,
          billingTime: "2025/1/5 18:33",
          customerName: "井冈山创派",
          orderNumber: "80526632",
          materialCode: "220014004710",
          name: "Q-panel B Cell片",
          quantity: 3238,
          shouldShip: 22,
          actualShip: 22,
          status: "已发",
          difference: 0,
          remarks: "",
          shipmentTime: "2024/1/4 20:50",
          driver: "万洪",
          vehicle: "渝DZ1891",
        },
        {
          id: 7,
          billingTime: "2025/1/5 18:33",
          customerName: "井冈山创派",
          orderNumber: "80526632",
          materialCode: "220014004710",
          name: "Q-panel B Cell片",
          quantity: 3238,
          shouldShip: 22,
          actualShip: 22,
          status: "已发",
          difference: 0,
          remarks: "",
          shipmentTime: "2024/1/4 20:50",
          driver: "万洪",
          vehicle: "渝DZ1891",
        },
        {
          id: 11,
          billingTime: "2025/1/5 18:33",
          customerName: "井冈山创派",
          orderNumber: "80526632",
          materialCode: "220014004710",
          name: "Q-panel B Cell片",
          quantity: 3238,
          shouldShip: 22,
          actualShip: 22,
          status: "已发",
          difference: 0,
          remarks: "",
          shipmentTime: "2024/1/4 20:50",
          driver: "万洪",
          vehicle: "渝DZ1891",
        },
      ],
      totalShipments: 112,
    };
  },
});
</script>

<style lang="scss" scoped>
 /* 可根据需要自定义表格样式 */
 .custom-table {
  display: flex;
  background-color: #f5f5f5;
  padding: 0.2rem ;
  flex-direction: column;
  height: calc(100vh - 1rem); /* 占满整个页面 */
}

.custom-table > .ant-table-wrapper {
  flex: 1; /* 让表格填充剩余空间 */
}
/* 表格容器背景色 */
.custom-table .ant-table-wrapper {
  background-color: #f5f5f5;
}

/* 表格标题背景色 */
.custom-table .ant-table-thead > tr > th {
  background-color: #d9f7be;
}

/* 表格内容背景色（交替行颜色） */
.custom-table .ant-table-tbody > tr:nth-child(odd) > td {
  background-color: #f9f9f9;
}
.custom-table .ant-table-tbody > tr:nth-child(even) > td {
  background-color: #ffffff;
}

/* 页脚背景色 */
.custom-table .ant-table-footer {
  background-color: #e6f7ff;
}
</style>
